<template>
  <div :class="prefixCls">
    <BasicTable @register="registerTable" :rowSelection="rowSelection" v-bind="$attrs">
      <template #tableTitle>
        <a-button preIcon="ant-design:plus" type="primary" :class="newAddBtn" @click="onAdd">新增</a-button>
        <a-button preIcon="ant-design:highlight" type="primary" :class="customBtn" @click="onShowCustomButton">自定义按钮</a-button>
        <a-button preIcon="ant-design:strikethrough" type="primary" :class="enhanceJsBtn" @click="onShowEnhanceJs">JS增强</a-button>
        <a-button preIcon="ant-design:filter" type="primary" :class="enhanceSqlBtn" @click="onShowEnhanceSql">SQL增强</a-button>
        <a-button preIcon="ant-design:tool" type="primary" :class="enhanceJavaBtn" @click="onShowEnhanceJava">JAVA增强</a-button>
        <a-button preIcon="ant-design:database" type="primary" :class="exportDbBtn" @click="onImportDbTable">导入数据库表</a-button>
        <a-button preIcon="bx:bx-code-alt" type="primary" :class="codeGeneratorBtn" @click="onGenerateCode">代码生成</a-button>

        <a-dropdown v-if="selectedRowKeys.length > 0">
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="batchHandleDelete">
                <Icon icon="ant-design:delete-outlined" />
                删除
              </a-menu-item>
            </a-menu>
          </template>
          <a-button>批量操作<Icon icon="mdi:chevron-down" /> </a-button>
        </a-dropdown>
      </template>

      <template #dbSync="{ text }">
        <span v-if="text === 'Y'" style="color: limegreen">已同步</span>
        <span v-if="text === 'N'" style="color: red">未同步</span>
      </template>

      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
      </template>
    </BasicTable>
  </div>
  <CgformModal @register="registerCgformModal" @success="reload" />
  <DbToOnlineModal @register="registerDbToOnlineModal" @success="reload" />
  <CodeGeneratorModal @register="registerCodeGeneratorModal" />
  <CustomButtonList @register="registerCustomButtonModal" />
  <EnhanceJsModal @register="registerEnhanceJsModal" />
  <EnhanceSqlModal @register="registerEnhanceSqlModal" />
  <EnhanceJavaModal @register="registerEnhanceJavaModal" />
  <AuthManagerDrawer @register="registerAuthManagerDrawer" />
  <AuthSetterModal @register="registerAuthSetterModal" />
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicTable, TableAction } from '/@/components/Table';

  import CgformModal from './components/CgformModal.vue';
  import DbToOnlineModal from './components/DbToOnlineModal.vue';
  import CodeGeneratorModal from './components/CodeGeneratorModal.vue';
  import CustomButtonList from './components/button/CustomButtonList.vue';
  import EnhanceJsModal from './components/enhance/EnhanceJsModal.vue';
  import EnhanceJavaModal from './components/enhance/EnhanceJavaModal.vue';
  import EnhanceSqlModal from './components/enhance/EnhanceSqlModal.vue';
  import AuthManagerDrawer from './components/auth/AuthManagerDrawer.vue';
  import AuthSetterModal from './components/auth/AuthSetterModal.vue';

  import { useCgformList, CgformPageType, useCgformIntro } from './use/useCgformList';
  import { columns, searchFormSchema } from './cgform.data';

  export default defineComponent({
    name: 'CgformIndex',
    components: {
      BasicTable,
      TableAction,
      CgformModal,
      DbToOnlineModal,
      CodeGeneratorModal,
      CustomButtonList,
      EnhanceJsModal,
      EnhanceJavaModal,
      EnhanceSqlModal,
      AuthManagerDrawer,
      AuthSetterModal,
    },
    setup() {
      const {
        pageContext,
        onAdd,
        onDeleteBatch,
        onImportDbTable,
        onGenerateCode,
        onShowCustomButton,
        onShowEnhanceJs,
        onShowEnhanceSql,
        onShowEnhanceJava,
        getTableAction,
        getDropDownAction,
        registerAuthManagerDrawer,
        registerAuthSetterModal,
        registerCustomButtonModal,
        registerEnhanceJsModal,
        registerEnhanceSqlModal,
        registerEnhanceJavaModal,
        registerCgformModal,
        registerDbToOnlineModal,
        registerCodeGeneratorModal,
      } = useCgformList({
        pageType: CgformPageType.normal,
        designScope: 'online-cgform-list',
        columns,
        formSchemas: searchFormSchema,
      });
      const { prefixCls, tableContext } = pageContext;
      const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
      const { newAddBtn, customBtn, enhanceJsBtn, enhanceSqlBtn, exportDbBtn, enhanceJavaBtn, codeGeneratorBtn } = useCgformIntro();

      return {
        prefixCls,
        reload,
        rowSelection,
        selectedRowKeys,
        onAdd,
        onDeleteBatch,
        onImportDbTable,
        onGenerateCode,
        onShowCustomButton,
        onShowEnhanceJs,
        onShowEnhanceSql,
        onShowEnhanceJava,
        getTableAction,
        getDropDownAction,
        registerAuthManagerDrawer,
        registerAuthSetterModal,
        registerCustomButtonModal,
        registerEnhanceJsModal,
        registerEnhanceSqlModal,
        registerEnhanceJavaModal,
        registerTable,
        registerCgformModal,
        registerDbToOnlineModal,
        registerCodeGeneratorModal,
        newAddBtn,
        customBtn,
        enhanceJsBtn,
        enhanceSqlBtn,
        enhanceJavaBtn,
        exportDbBtn,
        codeGeneratorBtn,
      };
    },
  });
</script>
